<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue"></script>

    <script>
        window.onload=function(){
            Vue.component('todoWord',{
                props:['total','undo'],
                template:'#myComp'
            })
            var app4=new Vue({
                el:"#app-4",
                methods:{
                    addThings:function(){
                        this.todos.push({name:this.things,done:false})
                    },
                    switchThings:function(index){
                        this.todos[index].done=!this.todos[index].done
                    }
                },
                data:{
                    things:null,
                    todos:[{name:"wff",done:false}]
                },
                computed:{
                    undo:function(){
                        var count= 0
                        for(var i=0;i<this.todos.length;i++)
                        {
                            if(!this.todos[i].done){
                                count++;
                            }
                        }
                                return count;
                    }
                }
            })
        }

    </script>
    <style>.del{text-decoration:line-through}</style>
</head>
<body>
<div id="app-4">
    <input type="text" v-model="things" v-on:keyup.enter="addThings">
    <button v-on:click='addThings'>添加</button>
    <div v-for="(todo,ind) in todos">
        <input type="checkbox" v-on:click="switchThings(ind)">{{ind+1}}
        <span :class="{del:todo.done}">{{todo.name}}</span>
    </div>
    <todo-word :total="todos.length" :undo="undo"></todo-word>
</div>
<template  id="myComp">
        <span>
            <div>一共{{total}}个事项，{{total-undo}}项已完成,{{undo}}未完成</div>
        </span>
</template>
</body>
</html>